<template>
	<div v-if="value" class="loading">
		<div class="conn">
			<i class="el-icon-loading"></i>
			<span class="title">{{title}}</span>
		</div>
	</div>
</template>

<script>
export default {
	props:{
		value:{
			default:false
		},
		title:{
			default:'加载中'
		},
	},
	data(){
		return {}
	}
}
</script>

<style lang="less" scoped>
.loading{
	position:fixed;user-select: none;z-index: 3022;
	left:0;top:0;width:100%;height:100%;
	display: flex;justify-content:center;align-items:center;
	.conn{
		background: #fff;border:1px solid #D2D3D2;border-radius: 2px;
		color:#6d6d6d;
		line-height:70px;
		font-size: 0;
		box-shadow: 0px 0px 15px #868686;
		.el-icon-loading{
			font-size:28px;vertical-align: middle;padding:16px;
		}
		.title{
			font-size:16px;vertical-align: middle;display: inline-block;
			min-width: 100px;margin-right:16px;
		}
	}
}
</style>